<template>
  <div class="liveDashboard">
    <el-card>
      <div class="title">
        直播账单
      </div>
    </el-card>

    <!-- 统计标签 -->
    <el-card style="margin-top: 1px;">
      <statisticsTag
        :data="optionsData"
        @searchStatus="searchStatus"
        v-if="optionsData.length"
      />
    </el-card>

    <!-- echarts -->
    <el-row class="echarts" style="margin-top: 20px;" :gutter="20">
      <el-col :span="14">
        <el-card>
          <!-- <div class="echarts_title">
            <span>上课时长图表展示</span>
            <div class="echarts_left_describe">
              <span
                ><i style="background: rgba(24, 94, 249, 1)"></i
                >一对一教室</span
              >
              <span
                ><i style="background: rgba(250, 109, 91, 1)"></i
                >一对多教室</span
              >
            </div>
          </div> -->
          <div id="durationEcharts" style="width: 100%; height: 300px;"></div>
          <div class="echarts_times">
            <!-- 等待添加图表 -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card>
          <div class="echarts_title">存储空间</div>
          <div id="spaceEcharts" style="width: 100%; height: 279px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- form -->
    <el-row class="form" style="margin-top: 20px;" :gutter="20">
      <el-col :span="12">
        <el-card>
          <div class="form_title">
            教室直播时长排名
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="form_title">
            即将上课的教室
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { changeTitleMinin } from "@/mixin";
import statisticsTag from "@/components/statisticsTag";
import http from "@/api/dashboard";
export default {
  name: "liveDashboard",
  mixins: [changeTitleMinin],
  components: {
    statisticsTag
  },
  // 图标相关

  data() {
    return {
      optionsData: [
        {
          label: "已充值金额",
          total: 0,
          status: "customer",
          icon: "icon-weifukuan-",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB",
          flag: "many"
        },
        {
          label: "已消费金额",
          total: 0,
          status: "student",
          icon: "icon-yifukuan",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751",
          flag: "many"
        },
        {
          label: "剩余金额",
          total: 0,
          status: "dyned",
          icon: "icon-yifukuan",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751",
          flag: "many"
        },
        {
          label: "上课总费用",
          total: 0,
          status: "contract",
          icon: "icon-zhihangzhong",
          backgroundStart: "#FFC41F",
          backgroundEnd: "#FFA41E",
          flag: "many"
        },
        {
          label: "存储总费用",
          total: 0,
          status: "teacher",
          icon: "icon-jijiangdaoqi",
          backgroundStart: "#A946EB",
          backgroundEnd: "#A946EB",
          flag: "many"
        }
      ]
    };
  },
  methods: {
    searchStatus(status) {
      // 统计标签的编程路由 （未定义）
      switch (status) {
        case "customer":
          this.$router.push({ name: "customerManage" });
          break;
        case "student":
          this.$router.push({ name: "studentManage" });
          break;
        case "dyned":
          this.$router.push({ name: "dynedAccountManage" });
          break;
        case "contract":
          this.$router.push({ name: "contractManage" });
          break;
        case "teacher":
          this.$router.push({ name: "teacherList" });
          break;
      }
    },
    drawEcharts() {
      let option = {
        backgroundColor: "#fff",
        title: {
          text: "上课时长图表展示",
          textStyle: {
            fontWeight: "normal",
            fontSize: 16,
            color: "#333"
          },
          left: "6%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#999"
            }
          }
        },
        legend: {
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ["一对一教室", "一对多教室"],
          right: "4%",
          textStyle: {
            fontSize: 12,
            color: "#999"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            data: [
              "2020/02/01",
              "2020/02/02",
              "2020/02/03",
              "2020/02/04",
              "2020/02/05"
            ]
          },
          {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            axisTick: {
              show: false
            },

            position: "bottom",
            offset: 20
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "时长（小时）",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: "#57617B"
              }
            }
          }
        ],
        series: [
          {
            name: "一对一教室",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "rgba(24,94,249, 0.3)" },
                    {
                      offset: 0.8,
                      color: "rgba(24,94,249, 0)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "rgb(24,94,249)",
                borderColor: "rgba(24,94,249,0.27)",
                borderWidth: 12
              }
            },
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
          },
          {
            name: "一对多教室",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(250,109,91, 0.3)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(250,109,91, 0)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "rgb(250,109,91)",
                borderColor: "rgba(250,109,91,0.2)",
                borderWidth: 12
              }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
          }
        ]
      };
      let colorList = ["#F93128", "#185EF9", "rgba(250,250,250,0.5)"];
      let option1 = {
        title: {
          text: "188G",
          subtext: "总存储空间",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 30,
            fontWeight: "normal",
            color: ["#000"]
          },
          subtextStyle: {
            color: "#000",
            fontSize: 18
          }
        },
        grid: {
          bottom: 150,
          left: 0,
          right: "10%"
        },
        legend: {
          show: false,
          orient: "vertical",
          top: "middle",
          right: "5%",
          textStyle: {
            color: "#f2f2f2",
            fontSize: 25
          },
          icon: "roundRect"
        },
        series: [
          // 主要展示层的
          {
            radius: ["25%", "51%"],
            center: ["50%", "50%"],
            type: "pie",
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 15,
                length2: 120,
                lineStyle: {
                  color: "#d3d3d3"
                },
                align: "right"
              },
              color: "#000",
              emphasis: {
                show: true
              }
            },
            label: {
              normal: {
                formatter: function(params) {
                  var str = "";
                  switch (params.name) {
                    case "课件存储":
                      str =
                        "{a|}\n{nameStyle|课件存储 }" +
                        "{rate|" +
                        params.value +
                        "%}";
                      break;
                    case "录制件存储":
                      str =
                        "{b|}\n{nameStyle|录制件存储 }" +
                        "{rate|" +
                        params.value +
                        "%}";
                      break;
                  }
                  return str;
                },
                padding: [0, -110],
                height: 165,
                rich: {
                  a: {
                    width: 38,
                    height: 38,
                    lineHeight: 50,
                    align: "left"
                  },
                  b: {
                    width: 29,
                    height: 45,
                    lineHeight: 50,
                    align: "left"
                  },
                  nameStyle: {
                    fontSize: 16,
                    color: "#555",
                    align: "left"
                  },
                  rate: {
                    fontSize: 20,
                    color: "#1ab4b8",
                    align: "left"
                  }
                }
              }
            },
            data: [
              {
                value: 30,
                name: "课件存储"
              },
              { value: 70, name: "录制件存储" }
            ]
          },
          // 边框的设置
          {
            radius: ["47%", "51%"],
            center: ["50%", "50%"],
            type: "pie",
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: "rgba(250,250,250,0.5)"
              }
            },
            data: [
              {
                value: 1
              }
            ]
          }
        ]
      };
      this.$echartsFn.draweharts("durationEcharts", option);
      this.$echartsFn.draweharts("spaceEcharts", option1);
    }
  },
  created() {},
  mounted() {
    this.drawEcharts();
  }
};
</script>

<style lang="scss">
.liveDashboard {
  font-size: 20px;
  color: #333;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  .echarts_title {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .echarts_left_describe {
      display: flex;
      font-size: 12px;
      span {
        display: flex;
        align-items: center;
        margin-right: 15px;
      }
      i {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 3px;
      }
    }
  }
  .form_title {
    font-size: 16px;
  }
}
</style>
